<template>
  <div class="wuliu">

    <div v-loading='loading'>

      <div class='kflexbc' style="margin-bottom: 20px;">
        <div class="kflexc" >
          <el-upload ref="upload" action="#" :before-upload="uploasd2" :show-file-list="false" accept=".xlsx,.xls">
             <el-button type="danger" round style="margin-right: 10px;">导入添加号码</el-button>
          </el-upload>
          <div @click="xiazai" style="margin-right: 10px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>
        </div>
        <div style="display: flex;align-items: unset;" >
          号码自动释放
          <el-switch
            @change="changesf"
            style="margin-left: 10px;"
            v-model="isshifang"
            :active-value='1'
            :inactive-value='0'>
          </el-switch>
        </div>
      </div>

      <div class="kflexbc" style="margin-bottom: 20px;" >
        <div class="kflexc" >
          <div style="width: 250px; margin-right: 20px;">
            <el-input v-model="all.mobile" placeholder="号码"></el-input>
          </div>
          <el-select v-model="all.status" clearable style="width: 200px; margin-right: 20px;" placeholder="号码状态">
           <el-option  label="空闲" value="1"> </el-option>
           <el-option  label="已取" value="20"> </el-option>
           <el-option  label="上架" value="30"> </el-option>
           <el-option  label="预占" value="40"> </el-option>
           <el-option  label="实占" value="50"> </el-option>
          </el-select>

          <div style="width: 200px; margin-right: 20px;">
            <el-input v-model="all.province" placeholder="请输入归属地 省"></el-input>
          </div>
          <div style="width: 200px; margin-right: 20px;">
            <el-input v-model="all.city" placeholder="请输入归属地 市"></el-input>
          </div>

          <el-select v-model="all.channel" clearable style="width: 200px; margin-right: 20px;" placeholder="销售渠道">
           <el-option  label="敢探号销售渠道" value="1"> </el-option>
           <el-option label="天猫号库" value="2"> </el-option>
           <el-option  label="抖音自动上号" value="3"> </el-option>

          </el-select>

          <!-- <diqu :cengshu="2" :sheng="all.province" :shi="all.city" :w="'250px'" :name="'请选择归属地'" @chuandizhi="chuandizhi" v-if="relo" style="margin-right: 20px;"></diqu> -->

          <el-select v-model="all.order_status"  style="width: 200px; margin-right: 10px;" filterable clearable placeholder="订单状态">
          	<el-option label="初步审核" value="120"></el-option>
          	<el-option label="等待上传照片" value="150"></el-option>
          	<el-option label="待审核" value="200"></el-option>
          	<el-option label="待开卡" value="450"></el-option>
          	<el-option label="已领取" value="460"></el-option>
          	<el-option label="开卡中" value="470"></el-option>
          	<el-option label="待发货" value="500"></el-option>
          	<el-option label="已发货" value="550"></el-option>
          	<el-option label="初审失败" value="-451"></el-option>
          	<el-option label="开卡失败" value="-460"></el-option>
          	<el-option label="证件不合格待重传" value="-200"></el-option>
          	<el-option label="订单终止" value="0"></el-option>
          </el-select>

          <el-select v-model="all.shop_id" clearable style="width: 200px; margin-right: 20px;" placeholder="请选择店铺名称">
           <el-option  :label="item.shop_name" :value="item.id" v-for="item in dianpus" :key="item.id"> </el-option>
          </el-select>

          <el-button type="danger" round @click="search()">搜索</el-button>
        </div>

      </div>


      <!-- <div style="display: flex;margin-bottom: 20px;font-size: 15px;flex-wrap: wrap;">
        <div style="margin-right: 20px;margin-bottom: 10px;" v-for="(item,index) in citynum" :key="index">{{ item.city }}:{{ item.count }}</div>
      </div> -->
      <div class="kflexbc">
        <div class="kflexc">

          <el-button type="danger" style="margin-right: 10px;" round plain @click="shifangduo()">批量释放</el-button>
          <el-button type="danger" style="margin-right: 10px;" round plain @click="shanchuduo()">批量删除</el-button>
          <el-button type="danger" style="margin-right: 20px;" round plain @click="piliangxiugai()">批量修改状态</el-button>

          <el-upload ref="upload" action="#" :before-upload="uploasd3" :show-file-list="false" accept=".xlsx,.xls">
             <el-button type="danger" round style="margin-right: 10px;">导入释放号码</el-button>
          </el-upload>
          <div @click="xiazai3" style="margin-right: 10px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>

          <el-upload ref="upload" action="#" :before-upload="uploasd4" :show-file-list="false" accept=".xlsx,.xls">
             <el-button type="danger" round style="margin-right: 10px;">导入删除号码</el-button>
          </el-upload>
          <div @click="xiazai4" style="margin-right: 10px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>

          <el-upload ref="upload" action="#" :before-upload="uploasd5" :show-file-list="false" accept=".xlsx,.xls">
             <el-button type="danger" round style="margin-right: 10px;">导入修改状态</el-button>
          </el-upload>
          <div @click="xiazai5" style="margin-right: 10px; font-size: 12px; color: #999; cursor: pointer;">下载模板</div>

        </div>
        <div class="kflexc fen">
          <el-button type="danger" style="margin-right: 10px;" round @click="daochu()">导出</el-button>
          <el-button type="primary" plain style="margin-right: 10px;" round @click="goid('/gongju/order_export_haoma',33)">查看导出记录</el-button>
          <el-button type="primary" plain style="margin-right: 10px;" round @click="todaoru">号码导入记录</el-button>
        </div>
      </div>


      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable"  @sort-change="handleSortChange" @selection-change="handleSelectionChange">
        <el-table-column  type="selection"  width="55"></el-table-column>
        <el-table-column align='center' prop='mobile' :label="'号码('+total+')'">
          <template slot-scope="scope">{{scope.row.mobile}}</template>
        </el-table-column>
        <el-table-column align='center' prop='status_name' label="号码状态"></el-table-column>
        <!-- <el-table-column align='center' prop='status_name' label="销售渠道"></el-table-column> -->
        <el-table-column align='center' prop='channel_name' label="销售渠道"></el-table-column>
        <el-table-column align='center' label="归属地">
          <template slot-scope="scope">{{scope.row.province}}{{scope.row.city}}</template>
        </el-table-column>
        <el-table-column align='center' prop='on_sale_shop' label="上架店铺"></el-table-column>
        <el-table-column align='center' prop='on_sale_id' label="上架ID"></el-table-column>
        <el-table-column align='center' prop='order_status' label="订单状态"></el-table-column>
        <el-table-column align='center' prop='updated_at' label="状态变更时间" sortable="custom"></el-table-column>

        <el-table-column align='center' prop='created_at' label="创建时间"></el-table-column>

        <el-table-column align='center' label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" size="mini"@click="shanchu(scope.row)">删除</el-button>
            <el-button type="text" size="mini"@click="logkai(scope.row)">修改状态</el-button>
            <el-button type="text" size="mini"@click="caozuojilu(scope.row)">操作记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev,pager,next,sizes" :current-page="all.page" @current-change="fanye" :page-size="all.page_size"  @size-change="handleSizeChange" :page-sizes="[20,50, 100, 500]" :total="total"></el-pagination>
    </div>
    <el-dialog title="修改状态" center :visible.sync="log" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <div class="kflexc" style="margin-top: 20px;">
          <el-select v-model="all2.status" style="width: 400px;" placeholder="请选择状态">
            <el-option v-for="item in sanlist" :label="item.name" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </div>

    	  <span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="log = false">取消</el-button>
    		<el-button type="danger" round @click="xiugaigo" v-if="danorduo == 'dan'">确定</el-button>
        <el-button type="danger" round @click="piliangxiugaigo()" v-if="danorduo == 'duo'">确定</el-button>
    	  </span>
    </el-dialog>

    <el-dialog title="重复号码" center :visible.sync="log2" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <div>重复号码：</div>
        <div v-for="item in cuowu" :key="item" style="margin-top: 5px;">
          {{item}}
        </div>


    	  <span slot="footer" class="dialog-footer">
    		<el-button type="info" round @click="log2 = false">取消</el-button>
    		<el-button type="danger" round @click="qiangzhi">强制导入</el-button>
    	  </span>
    </el-dialog>

    <el-dialog title="操作记录" center :visible.sync="caozuolog" width="440px"  :close-on-click-modal="false" :close-on-press-escape="false">


        <div v-for="item in caozuo" :key="item.id">
          {{item.created_at}}  {{item.operate}}
        </div>


    	  <span slot="footer" class="dialog-footer">
    		<el-button type="danger" round @click="caozuolog = false">关闭</el-button>

    	  </span>
    </el-dialog>
  </div>
</template>

<script>
  import diqu from '@/components/productionDelivery/tongyidizhi/zidongshengchanguanli.vue'
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    name: "wuliu",
    components:{
      diqu
    },
    data() {
      return {
        sanlist: [{
        		name: "空闲",
        		id: 1
        	},
        	{
        		name: "已取",
        		id: 20
        	},
        	{
        		name: "上架",
        		id: 30
        	},
          {
        		name: "预占",
        		id: 40
        	},
          {
        		name: "实占",
        		id: 50
        	},
        ],
        all2:{
          id:"",
          status:""
        },
        loading:false,
        list:"",
        all:{
          page:1,
          page_size:20,
          pool_id:this.$route.query.id,
          mobile:"",
          status:"",//1空闲 2预占 3已占
          sort:"",
          province:"",
          city:"",
          order_status:"",
          channel:'',
          shop_id:""
        },
        total:0,
        shopid:'',
        log:false,
        multipleSelection:"",

        cuowu:[],
        log2:false,
        dangqiandaoru:"",
        relo:true,
        citynum:[],
        isshifang:0,

        danorduo:"dan",
        caozuo:"",
        caozuolog:false,
        dianpus:[]
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist()
      //获取当前年月
      // this.getNowDate()
      // console.log(this.vsdate())
      //释放状态
      this.getsf()



      axios.get('/api/plan-market/pool/store/list?pool_id='+this.$route.query.id)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.dianpus = response.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

    },
    mounted() {

    },
    methods: {
      caozuojilu:function(item){
        axios.get('/api/plan-market/mobile/operate/log?id='+item.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.caozuo = response.data.data
              this.caozuolog = true
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //分页size改变
      handleSizeChange(e){
      	this.all.page_size = e
      	this.getlist()
      },
      handleSortChange:function({ column, prop, order }){
        if(order == null){
          this.all.sort = ''
        }else{
          if(prop == 'updated_at' && order == 'ascending'){
            this.all.sort = 1
          }
          if(prop == 'updated_at' && order == 'descending'){
            this.all.sort = 0
          }
        }
        this.getlist()
      },
      chuandizhi:function(val){
        this.all.province = val.sheng
        this.all.city = val.shi
      },
      xiugaigo:function(){
        axios.post('/api/plan-market/number/status', this.all2)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('修改成功');
              this.getlist()
              this.log = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      shanchu:function(item){
        this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/number/delete', {
              id: item.id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('删除成功');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      daochu:function(){
        axios.get('/api/plan-market/pool/numbers/export',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('导出成功');
              this.getlist()
              this.goopen('gongju/order_export_haoma')
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      shifangduo:function(){
        if(this.multipleSelection != ''){
          let arr = []
          this.multipleSelection.forEach(item=>{
            arr.push(item.id)
          })
          this.$confirm('确定释放吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post('/api/plan-market/numbers/release', {
                ids: arr
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message.success('释放成功');
                  this.getlist()
                } else {
                  this.$message.error(response.data.msg.info);
                }
              })
          })
        }else{
          this.$message.error('先选择要释放的号码');
        }
      },
      piliangxiugai:function(){
        this.danorduo = 'duo'
        this.log = true
      },
      piliangxiugaigo:function(){
        if(this.multipleSelection != ''){
          let arr = []
          this.multipleSelection.forEach(item=>{
            arr.push(item.id)
          })
          this.$confirm('确定要修改吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post('/api/plan-market/number/status/new', {
                ids: arr,
                status:this.all2.status
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message.success('修改成功');
                  this.getlist()
                  this.log = false
                } else {
                  this.$message.error(response.data.msg.info);
                }
              })
          })
        }else{
          this.$message.error('先选择要修改的号码');
        }
      },
      shanchuduo:function(){
        if(this.multipleSelection != ''){
          let arr = []
          this.multipleSelection.forEach(item=>{
            arr.push(item.id)
          })
          this.$confirm('确定删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post('/api/plan-market/new/numbers/delete', {
                ids: arr
              })
              .then(response => {
                if (response.data.msg.code == 0) {
                  this.$message.success('删除成功');
                  this.getlist()
                } else {
                  this.$message.error(response.data.msg.info);
                }
              })
          })
        }else{
          this.$message.error('先选择要删除的号码');
        }

      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      logkai:function(item){
        this.all2 = {
          id:item.id,
          status:item.status
        }
        this.danorduo = 'dan'
        this.log = true
      },
      readExcel1(files) {
        return new Promise((res, rej) => {
          var that = this;
          if (files.length <= 0) {
            return;
          }
          if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
            this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
            return;
          }
          const fileReader = new FileReader();
          fileReader.onload = (ev) => {
            try {
              const data = ev.target.result;
              const workbook = read(data, {
                type: 'binary'
              });
              // 取第一张表
              const wsname = workbook.SheetNames[0];
              // 生成json表格内容
              const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
              console.log(ws);
              // 后续为自己对ws数据的处理
              res(ws)
            } catch (e) {
              return false;
              rej(e)
            }
          };
          fileReader.readAsBinaryString(files[0]);
        })

      },

      uploasd2(file, fileList) {
        var that = this


        if(file.size > 1 * 1024 * 1024){
          this.$message.error('导入文件过大，请保证文件小于1M');
          return
        }

        var formData = new FormData();
        formData.append('pool_id', this.$route.query.id);
        formData.append('file', file);


        axios.post('/api/plan-market/numbers/import',formData)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                if(response.data.msg.code == 51043){



                  response.data.msg.info = JSON.parse(response.data.msg.info)
                  this.cuowu = response.data.msg.info

                  this.log2 = true
                }else{
                  this.$message.error(response.data.msg.info);
                }

              }
            })

        // let ff = this.readExcel1(files);
        // ff.then((res) => {

        //   res.forEach(item => {
        //     let obj = {
        //       mobile: item['手机号码'],
        //       province: item['省'],
        //       city: item['市'],
        //     }
        //     data.numbers.push(obj)
        //   })

        //   this.dangqiandaoru = data


        // })
      },
      qiangzhi:function(){
         this.dangqiandaoru.force_import = 1
        axios.post('/api/plan-market/numbers/import', this.dangqiandaoru)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.log2 = false
              this.$message.success(`导入成功`);
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      //真下载
      xiazai3: function(dizhi) {
        location.href = 'https://file.storep.91haoka.cn/gantanhao/shifanghaoma.xlsx?attname='
      },
      uploasd3(file, fileList) {

        var that = this
        let files = {
          0: file
        }
        let data = {
          pool_id:this.$route.query.id,
          numbers:[]
        }

        let ff = this.readExcel1(files);
        ff.then((res) => {

          res.forEach(item => {
            data.numbers.push(item['手机号码'])
          })

          axios.post('/api/plan-market/numbers/import/release',data)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //真下载
      xiazai4: function(dizhi) {
        location.href = 'https://file.storep.91haoka.cn/gantanhao/daorushanchuhaoma.xlsx?attname='
      },
      uploasd4(file, fileList) {
        var that = this
        let files = {
          0: file
        }
        let data = {
          pool_id:this.$route.query.id,
          numbers:[]
        }

        let ff = this.readExcel1(files);
        ff.then((res) => {

          res.forEach(item => {
            data.numbers.push(item['手机号码'])
          })

          axios.post('/api/plan-market/numbers/import/delete',data)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //真下载
      xiazai5: function(dizhi) {
        location.href = 'https://file.storep.91haoka.cn/gantanhao/daoruxiugaizhuangtai.xlsx?attname='
      },
      uploasd5(file, fileList) {
        var that = this
        let files = {
          0: file
        }
        let data = {
          pool_id:this.$route.query.id,
          numbers:[]
        }

        let ff = this.readExcel1(files);
        ff.then((res) => {

          res.forEach(item => {
            let status = ""
            if(item['状态'] == '空闲'){
              status = 1
            }
            if(item['状态'] == '已取'){
              status = 20
            }
            if(item['状态'] == '上架'){
              status = 30
            }
            if(item['状态'] == '预占'){
              status = 40
            }
            if(item['状态'] == '实占'){
              status = 50
            }
            let obj = {
              number:item['手机号码'],
              status:status
            }
            data.numbers.push(obj)
          })

          axios.post('/api/plan-market/numbers/import/status',data)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success(`导入成功`);
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //统计

      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        axios.get('/api/plan-market/numbers/list',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })


          axios.post('/api/plan-market/number/statistics',{
            pool_id:this.$route.query.id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('city')
              console.log(response.data.data)
              this.citynum = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

      },

      //下载模板
      xiazai: function() {
        location.href = 'https://file.storep.91haoka.cn/gantanhao/haochihaoma.xlsx'

      },


      todaoru(){
        this.$router.push({
          path:'/gongju/order_export_haoma_daoru',
          query:{id:this.$route.query.id}
        })
      },
      //自动释放开关
      changesf(val){
        console.log(this.isshifang)
        axios.post('/api/plan-market/pool/auto/release',{
            pool_id:this.$route.query.id,
            status:val
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success(`修改成功`);
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取释放状态
      getsf(){
        axios.post('/api/plan-market/get/pool/auto/release',{
            pool_id:this.$route.query.id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              console.log('sf')
              console.log(response.data.data.auto_release)
             this.isshifang = response.data.data.auto_release
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wuliu {
    .fen{
      .el-button--danger{
            color: #2974FF;
            background-color: #EEF7FF;
            border-color: #EEF7FF;
      }

    }
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
    .el-button--danger.is-plain {
        color: #EEF7FF !important;
        background: #EEF7FF !important;
        border-color: #18A0FB !important;
    }
  }
</style>
